import React from 'react'
import {Breadcrumb, Card, Icon, Menu} from 'antd'
import ReactRouterBreadcrumb from './components/react-router-breadcrumb'
import ReactRouter4Breadcrumb from './components/react-router4-breadcrumb'

export default class KimBreadcrumb extends React.Component {
  render() {
    return (
      <>
        <Card title='最简单的用法' style={{marginTop: 10}}>
          <Breadcrumb>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item> <a href=''>应用中心</a> </Breadcrumb.Item>
            <Breadcrumb.Item> <a href=''>应用列表</a> </Breadcrumb.Item>
            <Breadcrumb.Item>量子外贸云</Breadcrumb.Item>
          </Breadcrumb>
        </Card>

        <Card title='图标放在文字前面' style={{marginTop: 10}}>
          <Breadcrumb>
            <Breadcrumb.Item href=''> <Icon type='home'/> </Breadcrumb.Item>
            <Breadcrumb.Item href=''> <Icon type='user'/> <span>应用列表</span> </Breadcrumb.Item>
            <Breadcrumb.Item>应用详情</Breadcrumb.Item>
          </Breadcrumb>
        </Card>


        <Card title='面包屑支持下拉菜单' style={{marginTop: 10}}>
          <Breadcrumb>
            <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
            <Breadcrumb.Item> <a href="">src</a> </Breadcrumb.Item>
            <Breadcrumb.Item overlay={
              <Menu>
                <Menu.Item> <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"> 首页 </a>
                </Menu.Item>
                <Menu.Item> <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> 通用 </a>
                </Menu.Item>
                <Menu.Item> <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"> 路由 </a>
                </Menu.Item>
              </Menu>
            }>
              <a href="">pages</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>Button</Breadcrumb.Item>
          </Breadcrumb>
        </Card>


        <Card title='使用 separator=">" 可以自定义分隔符' style={{marginTop: 10}}>
          <Breadcrumb separator=">">
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item href=""> 应用中心</Breadcrumb.Item>
            <Breadcrumb.Item href=""> 应用列表</Breadcrumb.Item>
          </Breadcrumb>
        </Card>

        <Card title='使用 Breadcrumb.Separator 可以自定义分隔符' style={{marginTop: 10}}>
          <Breadcrumb separator="">
            <Breadcrumb.Item>位置</Breadcrumb.Item>
            <Breadcrumb.Separator>:</Breadcrumb.Separator>
            <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
            <Breadcrumb.Separator/>
            <Breadcrumb.Item href=""> 应用列表</Breadcrumb.Item>
            <Breadcrumb.Separator/>
            <Breadcrumb.Item>应用详情</Breadcrumb.Item>
          </Breadcrumb>
        </Card>


        <Card title='和 react-router@2 react-router@3 进行结合使用' style={{marginTop: 10}}>
          <ReactRouterBreadcrumb/>
        </Card>

        <Card title='和 react-router@4，或其他路由进行结合使用' style={{marginTop: 10}}>
          <ReactRouter4Breadcrumb/>
        </Card>


      </>
    )
  }
}


// API#
// Breadcrumb#
// 参数	                  说明	类型	默认值	版本
// itemRender	            自定义链接函数，和 react-router 配置使用	(route, params, routes, paths) => ReactNode	-	3.17.0
// params	                路由的参数	object	-	3.17.0
// routes	                router 的路由栈信息	routes[]	-	3.17.0
// separator	            分隔符自定义	string|ReactNode	'/'	3.17.0

// Breadcrumb.Item#
// 参数	                  说明	类型	默认值	版本
// href	                  链接的目的地	string	-	3.17.0
// overlay	              下拉菜单的内容	Menu | () => Menu	-	3.17.0
// onClick	              单击事件	(e:MouseEvent)=>void	-	3.17.0

// Breadcrumb.Separator 3.21.0#
// 参数	                  说明	类型	默认值	版本
// children	              要显示的分隔符	string|ReactNode	'/'	3.21.0
// 注意：在使用 Breadcrumb.Separator 时，其父组件的分隔符必须设置为 separator=""，否则会出现父组件默认的分隔符。


// 和 browserHistory 配合#
// 和 react-router 一起使用时，默认生成的 url 路径是带有 # 的，如果和 browserHistory 一起使用的话，你可以使用 itemRender 属性定义面包屑链接。
// import { Link } from 'react-router';
// const routes = [
//   {
//     path: 'index',
//     breadcrumbName: 'home',
//   },
//   {
//     path: 'first',
//     breadcrumbName: 'first',
//     children: [
//       {
//         path: '/general',
//         breadcrumbName: 'General',
//       },
//       {
//         path: '/layout',
//         breadcrumbName: 'Layout',
//       },
//       {
//         path: '/navigation',
//         breadcrumbName: 'Navigation',
//       },
//     ],
//   },
//   {
//     path: 'second',
//     breadcrumbName: 'second',
//   },
// ];

// function itemRender(route, params, routes, paths) {
//   const last = routes.indexOf(route) === routes.length - 1;
//   return last ? (
//     <span>{route.breadcrumbName}</span>
//   ) : (
//     <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
//   );
// }
// return <Breadcrumb itemRender={itemRender} routes={routes} />;
